<template>
  <div class="dashboard">
    <!-- 页面标题和欢迎信息 -->
    <div class="dashboard-header">
      <div class="welcome-section">
        <h1 class="page-title">仪表盘</h1>
        <p class="welcome-message">
          欢迎回来，{{ currentUser?.username }}！今天是 {{ currentDate }}
        </p>
      </div>
      <div class="header-actions">
        <el-button @click="$router.push('/admin/profile')">
          <Icon name="fa:user" />
          个人信息
        </el-button>
        <el-button
          type="primary"
          @click="$router.push('/admin/projects/create')"
        >
          <Icon name="fa:plus" />
          新建项目
        </el-button>
        <el-button @click="refreshData">
          <Icon name="fa:refresh" />
          刷新数据
        </el-button>
      </div>
    </div>

    <!-- 统计概览 -->
    <div class="stats-overview">
      <div class="stats-grid">
        <!-- 文章统计 -->
        <div
          class="stat-card"
          :class="{ highlight: stats.posts.thisMonth > 0 }"
        >
          <div class="stat-icon">
            <Icon name="fa:file-text" />
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ stats.posts.total }}</div>
            <div class="stat-label">总项目数</div>
            <div class="stat-trend">
              <span
                class="trend-indicator positive"
                v-if="stats.posts.thisMonth > 0"
              >
                +{{ stats.posts.thisMonth }}
              </span>
              <span class="trend-text">本月新增</span>
            </div>
          </div>
          <div class="stat-chart">
            <div class="mini-chart">
              <div class="chart-bar" style="height: 60%"></div>
              <div class="chart-bar" style="height: 80%"></div>
              <div class="chart-bar" style="height: 45%"></div>
              <div class="chart-bar" style="height: 90%"></div>
              <div class="chart-bar" style="height: 70%"></div>
            </div>
          </div>
        </div>

        <!-- 评论统计 -->
        <div
          class="stat-card"
          :class="{ highlight: stats.comments.pending > 0 }"
        >
          <div class="stat-icon">
            <Icon name="fa:comments" />
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ stats.comments.total }}</div>
            <div class="stat-label">总评论数</div>
            <div class="stat-trend">
              <span
                class="trend-indicator warning"
                v-if="stats.comments.pending > 0"
              >
                {{ stats.comments.pending }}
              </span>
              <span class="trend-text">待审核</span>
            </div>
          </div>
          <div class="stat-badge" v-if="stats.comments.pending > 0">
            <span class="badge-count">{{ stats.comments.pending }}</span>
          </div>
        </div>

        <!-- 浏览量统计 -->
        <div class="stat-card">
          <div class="stat-icon">
            <Icon name="fa:eye" />
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ formatNumber(stats.views.total) }}</div>
            <div class="stat-label">总浏览量</div>
            <div class="stat-trend">
              <span class="trend-indicator positive"
                >+{{ stats.views.today }}</span
              >
              <span class="trend-text">今日新增</span>
            </div>
          </div>
          <div class="stat-chart">
            <div class="sparkline">
              <svg width="60" height="30" viewBox="0 0 60 30">
                <path
                  :d="generateSparkline(stats.views.weekly)"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                />
              </svg>
            </div>
          </div>
        </div>

        <!-- 用户统计 -->
        <div class="stat-card">
          <div class="stat-icon">
            <Icon name="fa:users" />
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ stats.users.total }}</div>
            <div class="stat-label">总用户数</div>
            <div class="stat-trend">
              <span
                class="trend-indicator positive"
                v-if="stats.users.thisMonth > 0"
              >
                +{{ stats.users.thisMonth }}
              </span>
              <span class="trend-text">本月新增</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="dashboard-content">
      <div class="content-grid">
        <!-- 最近活动 -->
        <div class="content-card recent-activity">
          <div class="card-header">
            <h3 class="card-title">
              <Icon name="fa:clock" />
              最近活动
            </h3>
          </div>
          <div class="activity-list">
            <div
              v-for="activity in recentActivities"
              :key="activity.id"
              class="activity-item"
            >
              <div class="activity-icon" :class="activity.type">
                <Icon :name="getActivityIcon(activity.type)" />
              </div>
              <div class="activity-content">
                <div class="activity-title">{{ activity.title }}</div>
                <div class="activity-desc">{{ activity.description }}</div>
                <div class="activity-time">
                  {{ formatRelativeTime(activity.timestamp) }}
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 热门项目 -->
        <div class="content-card popular-projects">
          <div class="card-header">
            <h3 class="card-title">
              <Icon name="fa:project-diagram" />
              热门项目
            </h3>
            <el-button
              type="primary"
              link
              @click="$router.push('/admin/projects')"
            >
              查看全部
            </el-button>
          </div>
          <div class="projects-list">
            <div v-for="post in popularPosts" :key="post.id" class="post-item">
              <div class="post-rank">{{ post.rank }}</div>
              <div class="post-info">
                <div class="post-title">{{ post.title }}</div>
                <div class="post-meta">
                  <span class="meta-item">
                    <Icon name="fa:eye" />
                    {{ post.views }} 浏览
                  </span>
                  <span class="meta-item">
                    <Icon name="fa:heart" />
                    {{ post.likes }} 点赞
                  </span>
                </div>
              </div>
              <div
                class="post-trend"
                :class="{ up: post.trend > 0, down: post.trend < 0 }"
              >
                <Icon
                  :name="post.trend > 0 ? 'fa:arrow-up' : 'fa:arrow-down'"
                />
                {{ Math.abs(post.trend) }}%
              </div>
            </div>
          </div>
        </div>

        <!-- 快速操作 -->
        <div class="content-card quick-actions">
          <div class="card-header">
            <h3 class="card-title">
              <Icon name="fa:bolt" />
              快速操作
            </h3>
          </div>
          <div class="actions-grid">
            <div
              class="action-item"
              @click="$router.push('/admin/projects/create')"
            >
              <div class="action-icon">
                <Icon name="material-symbols:create-new-folder-rounded" />
              </div>
              <span class="action-text">新建项目</span>
            </div>
            <div class="action-item" @click="$router.push('/admin/media')">
              <div class="action-icon">
                <Icon name="fa:image" />
              </div>
              <span class="action-text">媒体库</span>
            </div>
            <div class="action-item" @click="$router.push('/admin/comments')">
              <div class="action-icon">
                <Icon name="fa:comments" />
              </div>
              <span class="action-text">评论管理</span>
            </div>
            <div class="action-item" @click="$router.push('/admin/settings')">
              <div class="action-icon">
                <Icon name="fa:cog" />
              </div>
              <span class="action-text">系统设置</span>
            </div>
          </div>
        </div>

        <!-- 系统状态 -->
        <div class="content-card system-status">
          <div class="card-header">
            <h3 class="card-title">
              <Icon name="fa:server" />
              系统状态
            </h3>
          </div>
          <div class="status-list">
            <div
              class="status-item"
              v-for="status in systemStatus"
              :key="status.name"
            >
              <div class="status-info">
                <div class="status-name">{{ status.name }}</div>
                <div class="status-value">{{ status.value }}</div>
              </div>
              <div class="status-indicator" :class="status.status">
                <div class="indicator-dot"></div>
                <span class="indicator-text">{{ status.statusText }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { DashboardStats } from "~/types/admin";

// 使用认证组合式函数
const { user } = useAuth();

// 当前用户
const currentUser = computed(() => user.value);

// 当前日期
const currentDate = ref(
  new Date().toLocaleDateString("zh-CN", {
    year: "numeric",
    month: "long",
    day: "numeric",
    weekday: "long",
  })
);

// 统计数据
const stats = ref<DashboardStats>({
  totalPosts: 156,
  totalCategories: 12,
  totalTags: 45,
  totalUsers: 234,
  publishedPosts: 142,
  draftPosts: 14,
  activeUsers: 156,
  posts: {
    total: 156,
    thisMonth: 23,
  },
  comments: {
    total: 1234,
    pending: 8,
  },
  views: {
    total: 98765,
    today: 456,
    weekly: [120, 150, 180, 200, 170, 190, 210],
  },
  users: {
    total: 234,
    thisMonth: 12,
  },
  recentActivity: [],
});

// 最近活动
const recentActivities = ref([
  {
    id: "1",
    type: "post",
    title: "新文章发布",
    description: '文章 "Vue 3 新特性解析" 已发布',
    timestamp: new Date(Date.now() - 30 * 60 * 1000), // 30分钟前
  },
  {
    id: "2",
    type: "comment",
    title: "新评论待审核",
    description: '用户 "张三" 在文章 "React Hooks 使用指南" 发表了评论',
    timestamp: new Date(Date.now() - 2 * 60 * 60 * 1000), // 2小时前
  },
  {
    id: "3",
    type: "user",
    title: "新用户注册",
    description: '用户 "李四" 已注册账号',
    timestamp: new Date(Date.now() - 5 * 60 * 60 * 1000), // 5小时前
  },
  {
    id: "4",
    type: "system",
    title: "系统备份完成",
    description: "数据库备份任务已完成",
    timestamp: new Date(Date.now() - 24 * 60 * 60 * 1000), // 1天前
  },
]);

// 热门文章
const popularPosts = ref([
  {
    id: "1",
    rank: 1,
    title: "Vue 3 Composition API 深度解析",
    views: 12345,
    likes: 234,
    trend: 12.5,
  },
  {
    id: "2",
    rank: 2,
    title: "React Hooks 最佳实践指南",
    views: 9876,
    likes: 156,
    trend: 8.3,
  },
  {
    id: "3",
    rank: 3,
    title: "TypeScript 在大型项目中的应用",
    views: 7654,
    likes: 89,
    trend: -2.1,
  },
  {
    id: "4",
    rank: 4,
    title: "Node.js 性能优化技巧",
    views: 5432,
    likes: 67,
    trend: 5.7,
  },
]);

// 系统状态
const systemStatus = ref([
  {
    name: "服务器状态",
    value: "运行中",
    status: "normal",
    statusText: "正常",
  },
  {
    name: "数据库连接",
    value: "连接正常",
    status: "normal",
    statusText: "正常",
  },
  {
    name: "存储空间",
    value: "75% 已使用",
    status: "warning",
    statusText: "警告",
  },
  {
    name: "缓存状态",
    value: "运行中",
    status: "normal",
    statusText: "正常",
  },
]);

// 加载状态
const loading = ref({
  posts: false,
  stats: false,
});

// 方法
const refreshData = () => {
  loading.value.stats = true;
  setTimeout(() => {
    loading.value.stats = false;
    ElMessage.success("数据已刷新");
  }, 1000);
};

const formatNumber = (num: number) => {
  if (num >= 10000) {
    return (num / 10000).toFixed(1) + "万";
  }
  if (num >= 1000) {
    return (num / 1000).toFixed(1) + "千";
  }
  return num.toString();
};

const generateSparkline = (data: number[]) => {
  if (!data || data.length === 0) return "";

  const max = Math.max(...data);
  const min = Math.min(...data);
  const range = max - min || 1;

  const points = data.map((value, index) => {
    const x = (index / (data.length - 1)) * 60;
    const y = 30 - ((value - min) / range) * 28;
    return `${x},${y}`;
  });

  return `M ${points.join(" L ")}`;
};

const getActivityIcon = (type: string) => {
  const icons = {
    post: "fa:file-text",
    comment: "fa:comments",
    user: "fa:user",
    system: "fa:cog",
  };
  return icons[type as keyof typeof icons] || "fa:info-circle";
};

const formatRelativeTime = (timestamp: Date) => {
  const now = new Date();
  const diff = now.getTime() - timestamp.getTime();

  const minutes = Math.floor(diff / (1000 * 60));
  const hours = Math.floor(diff / (1000 * 60 * 60));
  const days = Math.floor(diff / (1000 * 60 * 60 * 24));

  if (minutes < 1) return "刚刚";
  if (minutes < 60) return `${minutes}分钟前`;
  if (hours < 24) return `${hours}小时前`;
  if (days < 7) return `${days}天前`;

  return timestamp.toLocaleDateString("zh-CN");
};

// 页面元数据
useHead({
  title: "仪表盘 - 博客管理系统",
});
</script>

<style scoped>
.dashboard {
  padding: 0;
  min-height: calc(100% - 48px);
  transition: background-color 0.3s ease;
}

/* 头部区域 */
.dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  padding: 1.5rem 0;
  background: white;
  border-radius: 1rem;
  padding: 1.5rem 2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.dark .dashboard-header {
  background: #374151;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.welcome-section .page-title {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dark .welcome-section .page-title {
  background: linear-gradient(135deg, #60a5fa, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.welcome-message {
  color: #64748b;
  margin: 0;
  font-size: 1rem;
}

.dark .welcome-message {
  color: #9ca3af;
}

.header-actions {
  display: flex;
  gap: 1rem;
}

/* 统计概览 */
.stats-overview {
  margin-bottom: 2rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.stat-card {
  background: white;
  border-radius: 1rem;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.dark .stat-card {
  background: #374151;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.dark .stat-card:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.stat-card.highlight {
  border-left: 4px solid #3b82f6;
}

.dark .stat-card.highlight {
  border-left-color: #60a5fa;
}

.stat-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.25rem;
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1;
  margin-bottom: 0.25rem;
}

.dark .stat-value {
  color: #f3f4f6;
}

.stat-label {
  font-size: 0.875rem;
  color: #64748b;
  margin-bottom: 0.5rem;
}

.dark .stat-label {
  color: #9ca3af;
}

.stat-trend {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.trend-indicator {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: 1rem;
}

.trend-indicator.positive {
  background: #dcfce7;
  color: #16a34a;
}

.dark .trend-indicator.positive {
  background: #166534;
  color: #22c55e;
}

.trend-indicator.warning {
  background: #fef3c7;
  color: #d97706;
}

.dark .trend-indicator.warning {
  background: #92400e;
  color: #f59e0b;
}

.trend-text {
  font-size: 0.75rem;
  color: #64748b;
}

.stat-chart {
  width: 4rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mini-chart {
  display: flex;
  align-items: end;
  gap: 0.25rem;
  height: 2rem;
}

.chart-bar {
  width: 0.375rem;
  background: linear-gradient(to top, #3b82f6, #8b5cf6);
  border-radius: 0.125rem;
  animation: chartGrow 1s ease-out;
}

@keyframes chartGrow {
  from {
    height: 0;
  }
}

.sparkline {
  color: #3b82f6;
}

.stat-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.badge-count {
  background: #ef4444;
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 1rem;
  animation: pulse 2s infinite;
}

.dark .badge-count {
  background: #dc2626;
}

.dark .badge-count {
  background: #dc2626;
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* 主要内容区域 */
.dashboard-content {
  margin-bottom: 2rem;
}

.content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.content-card {
  background: white;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.dark .content-card {
  background: #374151;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.content-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.dark .content-card:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e2e8f0;
}

.dark .card-header {
  border-bottom-color: #4b5563;
}

.card-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
}

.dark .card-title {
  color: #f3f4f6;
}

/* 最近活动 */
.activity-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  border-radius: 0.75rem;
  transition: all 0.3s ease;
}

.activity-item:hover {
  background: #f8fafc;
}

.dark .activity-item:hover {
  background: #4b5563;
}

.dark .activity-item:hover {
  background: #4b5563;
}

.activity-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1rem;
  flex-shrink: 0;
}

.activity-icon.post {
  background: #3b82f6;
}
.activity-icon.comment {
  background: #10b981;
}
.activity-icon.user {
  background: #f59e0b;
}
.activity-icon.system {
  background: #8b5cf6;
}

.activity-content {
  flex: 1;
}

.activity-title {
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 0.25rem;
}

.dark .activity-title {
  color: #f3f4f6;
}

.activity-desc {
  font-size: 0.875rem;
  color: #64748b;
  margin-bottom: 0.5rem;
}

.dark .activity-desc {
  color: #9ca3af;
}

.activity-time {
  font-size: 0.75rem;
  color: #94a3b8;
}

.dark .activity-time {
  color: #6b7280;
}

/* 热门项目 */
.projects-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.post-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: 0.75rem;
  transition: all 0.3s ease;
}

.post-item:hover {
  background: #f8fafc;
}

.dark .post-item:hover {
  background: #4b5563;
}

.post-rank {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.875rem;
  flex-shrink: 0;
}

.post-info {
  flex: 1;
}

.post-title {
  font-weight: 500;
  color: #1e293b;
  margin-bottom: 0.25rem;
  line-height: 1.4;
}

.dark .post-title {
  color: #f3f4f6;
}

.post-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.75rem;
  color: #64748b;
}

.dark .post-meta {
  color: #9ca3af;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.post-trend {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
}

.post-trend.up {
  background: #dcfce7;
  color: #16a34a;
}

.dark .post-trend.up {
  background: #166534;
  color: #22c55e;
}

.post-trend.down {
  background: #fee2e2;
  color: #dc2626;
}

.dark .post-trend.down {
  background: #7f1d1d;
  color: #ef4444;
}

/* 快速操作 */
.actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 1rem;
  border: 2px dashed #e2e8f0;
  border-radius: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}

.dark .action-item {
  border-color: #4b5563;
}

.action-item:hover {
  border-color: #3b82f6;
  background: #f0f9ff;
  transform: translateY(-2px);
}

.dark .action-item:hover {
  border-color: #60a5fa;
  background: #1e3a8a;
}

.action-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}

.action-text {
  font-weight: 500;
  color: #1e293b;
}

.dark .action-text {
  color: #f3f4f6;
}

/* 系统状态 */
.status-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.status-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-radius: 0.75rem;
  background: #f8fafc;
  transition: all 0.3s ease;
}

.dark .status-item {
  background: #374151;
}

.status-item:hover {
  background: #f1f5f9;
}

.dark .status-item:hover {
  background: #4b5563;
}

.status-info {
  flex: 1;
}

.status-name {
  font-weight: 500;
  color: #1e293b;
  margin-bottom: 0.25rem;
}

.dark .status-name {
  color: #f3f4f6;
}

.status-value {
  font-size: 0.875rem;
  color: #64748b;
}

.dark .status-value {
  color: #9ca3af;
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.indicator-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}

.status-indicator.normal .indicator-dot {
  background: #10b981;
}

.status-indicator.warning .indicator-dot {
  background: #f59e0b;
  animation: pulse 2s infinite;
}

.indicator-text {
  font-size: 0.75rem;
  font-weight: 500;
}

.status-indicator.normal .indicator-text {
  color: #10b981;
}

.status-indicator.warning .indicator-text {
  color: #f59e0b;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .content-grid {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .dashboard-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .actions-grid {
    grid-template-columns: 1fr;
  }

  .stat-card {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }

  .stat-chart {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .dashboard-header,
  .content-card {
    padding: 1rem;
  }

  .stat-card {
    padding: 1rem;
  }

  .post-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}
</style>
